<template>
    <div class="menu-icons-wrapper" id="iconsWrapper" v-show="visible">
        <a-input-search class="search" v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
        <a-row>
            <a-col class="icons" :span="8" v-for="item in list" :key="item.name" @click="handleSelectIcon(item)">
                <component class="icon-value" :is="item.icon"></component>
                <span class="icon-label">{{ item.name }}</span>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue';

const allIconsList = [
    { icon: 'RetweetOutlined', name: 'RetweetOutlined' },
    { icon: 'PicLeftOutlined', name: 'PicLeftOutlined' },
    { icon: 'BorderOuterOutlined', name: 'BorderOuterOutlined' },
    { icon: 'WarningOutlined', name: 'WarningOutlined' },
    { icon: 'StopOutlined', name: 'StopOutlined' },
    { icon: 'IssuesCloseOutlined', name: 'IssuesCloseOutlined' },
    { icon: 'EditOutlined', name: 'EditOutlined' },
    { icon: 'CheckSquareOutlined', name: 'CheckSquareOutlined' },
    { icon: 'HighlightOutlined', name: 'HighlightOutlined' },
    { icon: 'CopyOutlined', name: 'CopyOutlined' },
    { icon: 'DeleteOutlined', name: 'DeleteOutlined' },
    { icon: 'SnippetsOutlined', name: 'SnippetsOutlined' },
    { icon: 'BgColorsOutlined', name: 'BgColorsOutlined' },
    { icon: 'AlignLeftOutlined', name: 'AlignLeftOutlined' },
    { icon: 'BoldOutlined', name: 'BoldOutlined' },
    { icon: 'StrikethroughOutlined', name: 'StrikethroughOutlined' },
    { icon: 'RedoOutlined', name: 'RedoOutlined' },
    { icon: 'FontColorsOutlined', name: 'FontColorsOutlined' },
    { icon: 'OrderedListOutlined', name: 'OrderedListOutlined' },
    { icon: 'UnorderedListOutlined', name: 'UnorderedListOutlined' },
    { icon: 'ColumnWidthOutlined', name: 'ColumnWidthOutlined' },
    { icon: 'ColumnHeightOutlined', name: 'ColumnHeightOutlined' },
    { icon: 'RadiusSettingOutlined', name: 'RadiusSettingOutlined' },
    { icon: 'AreaChartOutlined', name: 'AreaChartOutlined' },
    { icon: 'PieChartOutlined', name: 'PieChartOutlined' },
    { icon: 'BarChartOutlined', name: 'BarChartOutlined' },
    { icon: 'DotChartOutlined', name: 'DotChartOutlined' },
    { icon: 'LineChartOutlined', name: 'LineChartOutlined' },
    { icon: 'RadarChartOutlined', name: 'RadarChartOutlined' },
    { icon: 'HeatMapOutlined', name: 'HeatMapOutlined' },
    { icon: 'FallOutlined', name: 'FallOutlined' },
    { icon: 'RiseOutlined', name: 'RiseOutlined' },
    { icon: 'StockOutlined', name: 'StockOutlined' },
    { icon: 'BoxPlotOutlined', name: 'BoxPlotOutlined' },
    { icon: 'FundOutlined', name: 'FundOutlined' },
    { icon: 'SlidersOutlined', name: 'SlidersOutlined' },
    { icon: 'AndroidOutlined', name: 'AndroidOutlined' },
    { icon: 'AppleOutlined', name: 'AppleOutlined' },
    { icon: 'WindowsOutlined', name: 'WindowsOutlined' },
    { icon: 'ChromeOutlined', name: 'ChromeOutlined' },
    { icon: 'GithubOutlined', name: 'GithubOutlined' },
    { icon: 'AliwangwangOutlined', name: 'AliwangwangOutlined' },
    { icon: 'DingdingOutlined', name: 'DingdingOutlined' },
    { icon: 'DropboxOutlined', name: 'DropboxOutlined' },
    { icon: 'AntDesignOutlined', name: 'AntDesignOutlined' },
    { icon: 'BehanceOutlined', name: 'BehanceOutlined' },
    { icon: 'SlackOutlined', name: 'SlackOutlined' },
    { icon: 'SketchOutlined', name: 'SketchOutlined' },
    { icon: 'AlibabaOutlined', name: 'AlibabaOutlined' },
    { icon: 'AccountBookOutlined', name: 'AccountBookOutlined' },
    { icon: 'AimOutlined', name: 'AimOutlined' },
    { icon: 'AlertOutlined', name: 'AlertOutlined' },
    { icon: 'ApartmentOutlined', name: 'ApartmentOutlined' },
    { icon: 'ApiOutlined', name: 'ApiOutlined' },
    { icon: 'AppstoreAddOutlined', name: 'AppstoreAddOutlined' },
    { icon: 'AppstoreOutlined', name: 'AppstoreOutlined' },
    { icon: 'AudioOutlined', name: 'AudioOutlined' },
    { icon: 'AudioMutedOutlined', name: 'AudioMutedOutlined' },
    { icon: 'AuditOutlined', name: 'AuditOutlined' },
    { icon: 'BankOutlined', name: 'BankOutlined' },
    { icon: 'BarcodeOutlined', name: 'BarcodeOutlined' },
    { icon: 'BarsOutlined', name: 'BarsOutlined' },
    { icon: 'BellOutlined', name: 'BellOutlined' },
    { icon: 'BlockOutlined', name: 'BlockOutlined' },
    { icon: 'BookOutlined', name: 'BookOutlined' },
    { icon: 'BorderOutlined', name: 'BorderOutlined' },
    { icon: 'BorderlessTableOutlined', name: 'BorderlessTableOutlined' },
    { icon: 'BranchesOutlined', name: 'BranchesOutlined' },
    { icon: 'BugOutlined', name: 'BugOutlined' },
    { icon: 'BuildOutlined', name: 'BuildOutlined' },
    { icon: 'BulbOutlined', name: 'BulbOutlined' },
    { icon: 'CalculatorOutlined', name: 'CalculatorOutlined' },
    { icon: 'CalendarOutlined', name: 'CalendarOutlined' },
    { icon: 'CameraOutlined', name: 'CameraOutlined' },
    { icon: 'CarOutlined', name: 'CarOutlined' },
    { icon: 'CarryOutOutlined', name: 'CarryOutOutlined' },
    { icon: 'CiCircleOutlined', name: 'CiCircleOutlined' },
    { icon: 'CiOutlined', name: 'CiOutlined' },
    { icon: 'ClearOutlined', name: 'ClearOutlined' },
    { icon: 'CloudDownloadOutlined', name: 'CloudDownloadOutlined' },
    { icon: 'CloudOutlined', name: 'CloudOutlined' },
    { icon: 'CloudServerOutlined', name: 'CloudServerOutlined' },
    { icon: 'CloudSyncOutlined', name: 'CloudSyncOutlined' },
    { icon: 'CloudUploadOutlined', name: 'CloudUploadOutlined' },
    { icon: 'ClusterOutlined', name: 'ClusterOutlined' },
    { icon: 'VerifiedOutlined', name: 'VerifiedOutlined' },
    { icon: 'UserAddOutlined', name: 'UserAddOutlined' },
    { icon: 'UserOutlined', name: 'UserOutlined' },
    { icon: 'UserDeleteOutlined', name: 'UserDeleteOutlined' },
    { icon: 'UsergroupAddOutlined', name: 'UsergroupAddOutlined' },
    { icon: 'UserSwitchOutlined', name: 'UserSwitchOutlined' },
    { icon: 'ToolOutlined', name: 'ToolOutlined' },
    { icon: 'TagOutlined', name: 'TagOutlined' },
    { icon: 'SkinOutlined', name: 'SkinOutlined' },
    { icon: 'SolutionOutlined', name: 'SolutionOutlined' },
    { icon: 'SoundOutlined', name: 'SoundOutlined' },
    { icon: 'ShoppingCartOutlined', name: 'ShoppingCartOutlined' },
    { icon: 'ShoppingOutlined', name: 'ShoppingOutlined' },
    { icon: 'SettingOutlined', name: 'SettingOutlined' },
    { icon: 'SisternodeOutlined', name: 'SisternodeOutlined' },
    { icon: 'ShopOutlined', name: 'ShopOutlined' },
    { icon: 'SendOutlined', name: 'SendOutlined' },
    { icon: 'SelectOutlined', name: 'SelectOutlined' },
    { icon: 'ScheduleOutlined', name: 'ScheduleOutlined' },
    { icon: 'ScanOutlined', name: 'ScanOutlined' },
    { icon: 'SecurityScanOutlined', name: 'SecurityScanOutlined' },
    { icon: 'RestOutlined', name: 'RestOutlined' },
    { icon: 'ProfileOutlined', name: 'ProfileOutlined' },
    { icon: 'PartitionOutlined', name: 'PartitionOutlined' },
    { icon: 'GoldOutlined', name: 'GoldOutlined' },
    { icon: 'GlobalOutlined', name: 'GlobalOutlined' },
    { icon: 'HomeOutlined', name: 'HomeOutlined' },
    { icon: 'GiftOutlined', name: 'GiftOutlined' },
    { icon: 'DeploymentUnitOutlined', name: 'DeploymentUnitOutlined' },
    { icon: 'FieldNumberOutlined', name: 'FieldNumberOutlined' },
    { icon: 'FlagOutlined', name: 'FlagOutlined' },
    { icon: 'FireOutlined', name: 'FireOutlined' },
    { icon: 'FormatPainterOutlined', name: 'FormatPainterOutlined' },
    { icon: 'GatewayOutlined', name: 'GatewayOutlined' },
];

export default defineComponent({
    name: 'menuIcons',
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        value: {
            type: String,
        },
    },

    setup(props, { emit }) {
        const state = reactive({
            searchValue: '', // 搜索值
            list: allIconsList,
            timer: 0,
        });

        // 搜索筛选
        watch(
            () => state.searchValue,
            (newValue) => {
                clearTimeout(state.timer);
                state.timer = window.setTimeout(() => {
                    state.list = allIconsList.filter((item) => ~item.name.toLowerCase().indexOf(newValue));
                }, 500);
            }
        );

        watch(
            () => props.visible,
            () => {
                state.searchValue = '';
            }
        );

        // 选择图标
        const handleSelectIcon = (item: { [x: string]: string }) => {
            emit('update:value', item.icon);
        };
        return {
            ...toRefs(state),
            handleSelectIcon,
        };
    },
});
</script>

<style lang="scss" scoped>
.menu-icons-wrapper {
    z-index: 22;
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    max-height: 300px;
    background: $white;
    overflow: auto;
    @include border;
}
.search {
    z-index: 10;
    position: sticky;
    top: 0;
    left: 2px;
    width: calc(100% - 4px);
    background: $white;
}
.icons {
    @include flex;
    align-items: center;
    .icon-value {
        width: 24px;
    }
    .icon-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
